<template>
	<view class="book-box">
		<view class="book-item" v-for="(item, index) in list" @click="handleToDetail(item.id)" :key="index">
			<u-image width="110rpx" height="150rpx" :src="item.image" mode="cover" :fade="true" duration="450" style="box-shadow: 0.04267rem 0.04267rem 0.128rem 0.04267rem #e2e2e2;">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="book-info">
				<view class="book-name u-line-1">
					<text>{{item.name}}</text>
				</view>
				<view class="u-line-1" style="margin-bottom:20rpx">
					<text class="book-writer" style="margin-right:10rpx">{{item.writer}}</text>
					<text class="book-type">{{item.type}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BookList",
		props: {
			list: {
				type: Array,
				default: [],
			},
		},
		methods: {
			handleToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			},
		},
	};
</script>

<style scoped>
	.book-box {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - 46rpx); */
		overflow: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.book-box::-webkit-scrollbar {
		width: 0rpx;
	}

	.book-item {
		display: flex;
		justify-content: space-between;
		padding: 60rpx 20rpx 0rpx 40rpx;
	}

	.book-img {
		height: 150rpx;
		width: 112.5rpx;
		margin-right: 40rpx;
		border-radius: 6rpx;
		box-shadow: 2rpx 2rpx 6rpx 2rpx #e2e2e2;
	}

	.book-name {
		font-size: 28rpx;
		font-weight: 600;
	}



	.book-info {
		width: 65%;
		border-bottom: 1rpx solid rgba(232, 229, 229, 0.75);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.book-writer {
		font-size: 22rpx;
	}

	.book-type {
		font-size: 22rpx;
	}
</style>
